<template>
    <div class="vs-search">
        <div class="vs-bg">
            <div class="main_width">
                <div class="s-left">
                    人生不是比赛，但挑战和突破自我<br>
                    是永恒的命题
                </div>
                <div class="s-right">
                    <img src="https://cdn3.saikr.com/img/saikrnew/vs/wordcloud_pic@2x.png?v=2024030101" alt="">
                </div>
            </div>
            <el-input size="large" style="width: 800px;margin: -85px 0 0 50%; transform: translateX(-50%);"
                placeholder="在你擅长的领域，从40000+竞赛中找到适合你的那个" :suffix-icon="Search" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
</script>
<style lang="scss" scoped>
.vs-search {
    width: 100%;
    height: 240px;
    background: #f8f9fa url("https://cdn3.saikr.com/img/saikrnew/vs/light_bg.png") no-repeat right;
    margin-bottom: 42px;

    >* {
        overflow: hidden;
    }

    >.vs-bg {
        position: relative;
        height: 240px;
        background: url("https://cdn3.saikr.com/img/saikrnew/vs/left_pic900.png") no-repeat;
        background-position-x: 0%;
        background-position-y: 0%;
        background-position: 0 100%;
        -webkit-transition-duration: 0.2s;
        transition-duration: 0.2s;

        >.main_width {
            display: flex;
            justify-content: space-between;
            width: 1200px;
            margin: 0 auto;

            >.s-left {
                font-family: "AlimamaShuHeiTiBold";
                font-size: 29px;
                line-height: 40px;
                color: #fff;
                padding-top: 26px;
                text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
                font-weight: 900;
            }

            >.s-right {
                width: 426px;
            }

        }
    }
}
</style>